<template>
  <div class="wrap">
    <ul class="tabs">
      <li
        class="tab"
        v-for="tab in tabs"
        :key="tab.id"
        :class="{ active: currentTab === tab.component }"
        @click="handleTab(tab)"
      >
        {{ tab.name }}
        <span v-if="tab.num > 0">({{ tab.num > 100 ? '99+' : tab.num }})</span>
      </li>
    </ul>
    <div class="tabs-content">
      <load-more ref="listRef" :enable-refresh="false" @load="handleLoad">
        <keep-alive>
          <component
            :is="currentComponent"
            v-bind="currentComponentProps"
            v-on="currentComponentEvents"
          ></component>
        </keep-alive>
      </load-more>
    </div>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
import LoadMore from '@/components/LoadMore'
import useResult from './hooks/useResult'
export default {
  name: 'SearchResult',
  components: {
    LoadMore,
    SearchResultDefault: defineAsyncComponent(() =>
      import('./resultDefault.vue')
    ),
    SearchResultBangumi: defineAsyncComponent(() =>
      import('./resultBangumi.vue')
    ),
    SearchResultUser: defineAsyncComponent(() => import('./resultUser.vue')),
    SearchResultMovies: defineAsyncComponent(() => import('./resultMovies.vue'))
  },
  setup() {
    const {
      tabs,
      currentTab,
      currentComponent,
      currentComponentProps,
      currentComponentEvents,
      handleLoad,
      handleTab
    } = useResult()

    return {
      tabs,
      currentTab,
      currentComponent,
      currentComponentProps,
      currentComponentEvents,
      handleLoad,
      handleTab
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  min-height: calc(100vh - 54px);
  background-color: $color-grey;
}
.tabs {
  position: sticky;
  top: 49px;
  z-index: 2;
  display: flex;
  height: 44px;
  padding: 0 20px;
  justify-content: space-between;
  background-color: $color-white;
  .tab {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    margin-top: 7px;
    color: $color-text-regular;
    &.active {
      color: $theme-color;
      border-bottom: 2px solid $theme-color;
    }
  }
}
</style>
